<template>
    <div class="flex flex-align-center flex-grow-auto" style="height: 100%">
        <div class="echart-item flex-auto flex-grow-auto" style="height: 100%" ref="vipRef"></div>
        <div class="echart-item flex-auto flex-grow-auto" style="height: 100%" ref="profitRefs"></div>
    </div>
</template>

<script setup>
import { ref, reactive, defineEmits, toRefs, onBeforeMount, onMounted, watchEffect, computed, getCurrentInstance } from "vue";
import { useRoute, useRouter } from "vue-router";
const { proxy } = getCurrentInstance();
// proxy 替代 this
// 路由对象
const route = useRoute();
// 路由实例
const router = useRouter();
// 数据部分
const data = reactive({});
const vipRef = ref(null);
const profitRefs = ref(null);
const getPieOption = ({ name }) => {
    // 定义用于图表的颜色数组，colorLine 用于扇区渐变的起始颜色，colorLegend 用于渐变的结束颜色
    const colorLine = ["#3D9DFB", "#3EFDB0", "#FFC41C", "#FC7242"];
    const colorLegend = ["#000A1B", "#061C2C", "#192120", "#0E1728"];
    const legendList = [
        { name: "作业区", value: "420" },
        { name: "联合站", value: "423" },
        { name: "井场", value: "180" },
        { name: "其他", value: "180" },
    ];

    // 初始化数值变量 num，用于累加 legendList 中的所有数值
    let num = 0;
    // 遍历 legendList 数组，计算所有项的数值总和
    for (let i = 0; i < legendList.length; i++) {
        num = num + Number(legendList[i].value);
    }
    // 返回环形图的配置对象
    return {
        // 定义图表使用的颜色数组
        color: colorLine,
        // 网格配置，用于控制图表元素的位置和间距
        grid: {
            left: 30, // 左侧边距
            right: 30, // 右侧边距
            top: 30, // 上边距
            bottom: 30, // 下边距
        },
        // 提示框配置，用于设置鼠标悬浮时显示的信息
        tooltip: {
            trigger: "item", // 触发类型为 'item'，即每个扇区
            formatter: "{b}: {c} ({d}%)", // 格式化字符串，显示名称、数值和百分比
        },
        // 用于定义图表的数据和样式
        series: [
            // 表示环形图的主要扇区
            {
                name: "", // 系列名称
                type: "pie", // 图表类型为 'pie'，即饼图
                radius: ["60%", "52%"], // 饼图的内外半径百分比
                // center: ['25%', '50%'], // 饼图的中心位置（这里被注释掉了）
                avoidLabelOverlap: false, // 设置为 false 以允许标签重叠
                itemStyle: {
                    // 图表项的样式
                    // borderRadius: 10,  // 扇区圆角（这里被注释掉了）
                    borderColor: "#fff", // 扇区边框颜色
                    borderWidth: 2, // 扇区边框宽度
                    normal: {
                        // 普通状态下的样式
                        // 为扇区设置渐变色
                        color: function (params) {
                            // 使用回调函数根据数据项的索引设置渐变色
                            return {
                                type: "linear", // 渐变类型
                                x: 0, // 渐变起点 x 坐标
                                y: 0, // 渐变起点 y 坐标
                                x2: 1, // 渐变终点 x 坐标
                                y2: 1, // 渐变终点 y 坐标
                                colorStops: [
                                    // 颜色停止点数组
                                    {
                                        offset: 0, // 开始位置
                                        color: colorLine[params.dataIndex % colorLine.length], // 开始颜色
                                    },
                                    {
                                        offset: 1, // 结束位置
                                        color: colorLegend[params.dataIndex % colorLegend.length], // 结束颜色
                                    },
                                ],
                                globalCoord: false, // 是否使用全局坐标
                            };
                        },
                    },
                },
                label: {
                    normal: {
                        // 普通状态下的标签
                        show: true, // 显示标签
                        position: "center", // 标签位置为 'center'，即图表中心
                        color: "#9A9EBA", // 标签字体颜色
                        formatter: function () {
                            // 自定义标签内容
                            // 使用 '\n' 连接两个字符串，形成多行文本
                            let arr = ["{a|" + num + "}", `{b|${name}总数}`];
                            return arr.join("\n");
                        },
                        rich: {
                            // 富文本样式配置
                            a: {
                                // 第一行文本样式
                                fontFamily: "YouSheBiaoTiHei, YouSheBiaoTiHei", // 字体
                                fontWeight: 600, // 字重
                                fontSize: 18, // 字号
                                color: "#99EEFF;", // 字体颜色
                                padding: 10, // 内边距
                            },
                            b: {
                                // 第二行文本样式
                                fontWeight: 500, // 字重
                                fontFamily: "YouSheBiaoTiHei, YouSheBiaoTiHei", // 字体
                                fontSize: 18, // 字号
                                color: "#FFFFFF", // 字体颜色
                            },
                        },
                    },
                    emphasis: {
                        // 鼠标悬浮时的标签样式
                        show: true, // 显示标签
                    },
                    position: "center", // 标签位置为 'center'
                },
                emphasis: {
                    // 鼠标悬浮时的样式
                    label: {
                        // 标签样式
                        show: true, // 显示标签
                        fontSize: 14, // 字号
                        fontWeight: "bold", // 字重
                    },
                },
                labelLine: {
                    // 标签线配置
                    show: false, // 不显示标签线
                },
                data: legendList, // 传入的数据项
            },
            // 用于绘制内边框圆，增强视觉效果
            {
                type: "gauge", // 图表类型为 'gauge'，即仪表盘
                radius: "70%", // 仪表盘半径
                clockwise: true, // 顺时针显示
                startAngle: "90", // 开始角度
                endAngle: "-269.9999", // 结束角度
                splitNumber: 90, // 分割段数
                pointer: {
                    // 指针配置
                    show: false, // 不显示指针
                },
                axisLine: {
                    // 坐标轴线配置
                    show: false, // 不显示坐标轴线
                },
                axisTick: {
                    // 坐标轴刻度配置
                    show: false, // 不显示坐标轴刻度
                },
                tooltip: {
                    // 提示框配置
                    show: false, // 不显示提示框
                },
                splitLine: {
                    // 分隔线配置
                    show: true, // 显示分隔线
                    length: 10, // 分隔线长度
                    lineStyle: {
                        // 分隔线样式
                        color: "rgba(52, 185, 232, .5)", // 分隔线颜色
                        width: 1, // 分隔线宽度
                    },
                },
                axisLabel: {
                    // 坐标轴标签配置
                    show: false, // 不显示坐标轴标签
                },
            },
            // 用于绘制外边框圆，增强视觉效果
            {
                name: "外边框", // 系列名称
                type: "pie", // 图表类型为 'pie'，即饼图
                clockWise: true, // 顺时针显示
                silent: true, // 关闭鼠标悬浮提示
                animation: true, // 开启动画效果
                radius: ["62%", "66%"], // 边框半径百分比
                data: [
                    // 数据项
                    {
                        value: 1, // 数据值
                        itemStyle: {
                            // 样式配置
                            normal: {
                                // 普通状态下的样式
                                borderWidth: 1, // 边框宽度
                                borderColor: "#DFE1E6", // 边框颜色
                            },
                        },
                    },
                ],
            },
        ],
    };
};
const initEcharts = (elemRef, option) => {
    const myChart = window.echarts.init(elemRef);
    myChart.setOption(option);
};
onBeforeMount(() => {});
onMounted(() => {
    const vipOption = getPieOption({ name: "会员" });
    const profitOption = getPieOption({ name: "收益" });
    initEcharts(vipRef.value, vipOption);
    initEcharts(profitRefs.value, profitOption);
});
watchEffect(() => {});
// 使用toRefs解构
// let { } = { ...toRefs(data) }
defineExpose({
    ...toRefs(data),
});
</script>
<style scoped lang="scss">
.echart-item {
    position: relative;
    &:last-child {
        content: "收益占比分析";
    }
    &::before {
        content: "会员占比分析";
        position: absolute;
        left: 0;
        top: 5px;
        width: 100%;
        font-size: 14px;
        color: #6ebfff;
        font-weight: 700;
        text-align: center;
    }
}
</style>
